<template>
  <div class="app-container">
    <el-row class="topHeaders">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
      >
        <el-col :span="23" class="formBoxLeft">
          <el-form-item label="到诊时间" class="datetimerange">
            <el-date-picker
              v-if="hackReset"
              ref="dateValue"
              v-model="datePickerValue"
              :picker-options="pickerOptions"
              type="daterange"
              format="yyyy-MM-dd HH:mm"
              :editable="false"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="defaultTime"
              @change="selectDateArrived"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结账时间" class="datetimerange">
            <el-date-picker
              v-if="hackReset"
              ref="dateValueMinor"
              v-model="datePickerValueMinor"
              :picker-options="pickerOptions"
              type="daterange"
              format="yyyy-MM-dd HH:mm"
              :editable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="defaultTime"
              @change="selectDateArriveds"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="btnGroup">
            <el-button
              v-for="(item, index) in getDateList"
              :key="index"
              type="primary"
              size="small"
              class="btn"
              :class="{ isActive: isNormal === index }"
              @click="getDateFn(item.name, index)"
            >
              {{ item.name }}
            </el-button>
            <el-button
              v-hasPermi="['erp:reservation:export']"
              class="pan-btn yellow-btn"
              type="warning"
              icon="el-icon-download"
              size="small"
              @click="handleExports"
              >导出</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="1" class="formBoxRight">
          <show-or-hide
            :params="queryParams"
            :dict="{
              marketStatusOptions,
              marketMakeProject,
              clinicOptions,
              projectOptions,
              callBackStateOptions,
              reachStatusOptions,
              marketChannelList,
              marketPostList,
              affiliationPerson: [1],
              visitPerson: [1],
              filingPerson: [1],
            }"
            @query="handleQuerys"
            @show="showHide"
            @reset="resetRouters"
          />
        </el-col>
      </el-form>
    </el-row>
    <el-table
      v-loading="loading"
      border
      stripe
      :data="list"
      :height="clientHeight"
      :max-height="clientHeight"
      @row-click="handleDetails"
      @cell-dblclick="doubleHandle"
    >
      <el-table-column
        fixed="left"
        width="70"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-radio v-model="radio" class="radio" :label="scope.$index"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <columns-filter-view label="预约号">
        <el-table-column
          label="预约号"
          align="center"
          prop="reservationNumber"
          :min-width="'预约号'.length * 40"
      /></columns-filter-view>
      <columns-filter-view label="标识号">
        <el-table-column
          label="标识号"
          align="center"
          prop="caseNumber"
          :min-width="'标识号'.length * 40"
      /></columns-filter-view>
      <columns-filter-view label="头像">
        <el-table-column
          label="头像"
          align="center"
          prop="imageUrl"
          :min-width="'头像'.length * 40"
        >
          <template slot-scope="scope">
            <avatar-image :patient="scope.row" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="姓名">
        <el-table-column
          label="姓名"
          align="center"
          prop="name"
          :min-width="'姓名'.length * 50"
        >
          <template slot-scope="scope">
            <div style="cursor: pointer">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="手机号"
          align="center"
          :min-width="'手机号码'.length * 50"
        >
          <template slot-scope="scope">
            <hover-phone :items="scope.row" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="E看牙病历号">
        <el-table-column
          label="E看牙病历号"
          align="center"
          prop="teethCaseE"
          :min-width="'E看牙病历号'.length * 18"
      /></columns-filter-view>
      <columns-filter-view label="初诊门诊"
        ><el-table-column
          label="初诊门诊"
          align="center"
          prop="reservationClinic"
          :formatter="filterClinic"
          :min-width="'预约门诊'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="建档人"
        ><el-table-column label="建档人" align="center" prop="filingPerson"
      /></columns-filter-view>
      <columns-filter-view label="跟进人">
        <el-table-column label="跟进人" align="center" prop="followPerson" />
      </columns-filter-view>
      <columns-filter-view label="归属人"
        ><el-table-column
          label="归属人"
          align="center"
          prop="affiliationPerson"
      /></columns-filter-view>
      <columns-filter-view label="建档时间">
        <el-table-column
          label="建档时间"
          align="center"
          prop="filingTime"
          width="180"
      /></columns-filter-view>
      <columns-filter-view label="预约时间">
        <el-table-column
          label="预约时间"
          align="center"
          prop="reservationTime"
          width="180"
      /></columns-filter-view>
      <columns-filter-view label="回访状态"
        ><el-table-column
          label="回访状态"
          align="center"
          prop="callBackState"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view>
      <columns-filter-view label="到店时间">
        <el-table-column
          label="到店时间"
          align="center"
          prop="onClinicTime"
          width="180"
      /></columns-filter-view>
      <columns-filter-view label="结账时间">
        <el-table-column
          label="结账时间"
          align="center"
          prop="checkoutTime"
          width="180"
      /></columns-filter-view>
      <columns-filter-view label="一级渠道">
        <el-table-column
          label="一级渠道"
          align="center"
          prop="channelFirst"
          :min-width="'一级渠道'.length * 30"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.channelFirst == '-1'
                ? '直接上门'
                : scope.row.channelFirst
            }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="二级渠道"
        ><el-table-column
          label="二级渠道"
          align="center"
          prop="channelSecond"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="三级渠道">
        <el-table-column
          label="三级渠道"
          align="center"
          prop="channelThird"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="回访">
        <el-table-column
          label="回访"
          align="center"
          prop="reach"
          :min-width="'到店状态'.length * 50"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.reach !== '' || scope.row.reach.length !== 0
                ? scope.row.reach
                : '暂无回访'
            }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="性别">
        <el-table-column
          label="性别"
          align="center"
          column-key="sex"
          prop="sex"
          :formatter="(row) => formatterDict(row.sex, 'sexOptions')"
      /></columns-filter-view>
      <columns-filter-view label="年龄">
        <el-table-column label="年龄" align="center" prop="age">
          <template slot-scope="scope">
            <span>{{ scope.row.age == 0 ? '' : scope.row.age }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="开单状态">
        <el-table-column
          label="开单状态"
          align="center"
          prop="billingState"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view>
      <columns-filter-view label="成交金额">
        <el-table-column
          label="成交金额"
          align="center"
          prop="turnoverMoney"
          :min-width="'到店状态'.length * 30"
        >
          <template slot-scope="scope">
            <span>{{ fmtFloat(scope.row.turnoverMoney) }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <!-- <columns-filter-view label="预约病种" >
        <el-table-column label="预约病种" align="center" prop="reservationDisease" :min-width="'预约病种'.length*30" 
      /></columns-filter-view> -->
      <columns-filter-view label="访问病种"
        ><el-table-column
          :min-width="'访问病种'.length * 30"
          label="访问病种"
          align="center"
          prop="visitDisease"
      /></columns-filter-view>
      <!-- <columns-filter-view label="电话所属关系">
        <el-table-column
        :min-width="'电话所属关系'.length*30" 
        sortable
          label="电话所属关系"
          align="center"
          prop="phoneOwnership"
          :formatter="(_, __, value) => formatterDict(value, 'phoneOwnershipOptions')"
      /></columns-filter-view>
      <columns-filter-view label="手机号2"  >
        <el-table-column label="手机号2" align="center" prop="phoneNumber2" :min-width="'手机号'.length*50">
        <template slot-scope="scope">
            <span>{{ scope.row.phoneNumber2 == 0 ? '': scope.row.phoneNumber2 }}</span>
        </template>
        </el-table-column>
      /></columns-filter-view>
      <columns-filter-view label="状态"
        ><el-table-column label="状态" align="center" prop="status" :formatter="(_, __, value) => formatterDict(value, 'marketStatusOptions')"
      /></columns-filter-view> -->
      <columns-filter-view label="消费项目">
        <el-table-column
          label="消费项目"
          align="center"
          prop=""
          :min-width="'预约病种'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="初诊TC">
        <el-table-column
          label="初诊TC"
          align="center"
          prop="firstTc"
          :min-width="'预约病种'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="关键词">
        <el-table-column label="关键词" align="center" prop="keyword"
      /></columns-filter-view>
      <columns-filter-view label="微信号">
        <el-table-column
          label="微信号"
          align="center"
          prop="wechatNumber"
          :min-width="'微信号'.length * 30"
      /></columns-filter-view>
      <template slot="empty">
        <empty></empty>
      </template>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listReservation,
  delReservation,
  addReservation,
  updateReservation,
  exportReservation,
} from '@/api/erp/reservation'
import { ColumnsFilterView } from '@/components/yiya/TableColumnsFilter'
import showOrHide from '@/components/yiya/showOrHide'
import market from '@/mixins/market'
import moment from 'moment'
import { mapState } from 'vuex'
import avatarImage from '@/components/yiya/avatarImage'
import hoverPhone from '@/components/yiya/hoverPhone'
import Empty from '@/components/yiya/Empty'

export default {
  name: 'ReservationNonArrival',
  components: {
    ColumnsFilterView,
    showOrHide,
    avatarImage,
    hoverPhone,
    Empty,
  },

  mixins: [market],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 市场建档表格数据
      list: [],
      isNormal: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'onClinicTime',
        isAsc: 'desc',
      },
      // 到诊时间
      datePickerValue: [],
      // 结账时间
      datePickerValueMinor: [],
    }
  },
  computed: {
    ...mapState({
      marketParams: (state) =>
        state.pathQurey['/market/reservationArrived'] || {},
    }),
  },
  watch: {
    marketParams: {
      handler(newVal) {
        if (
          newVal.startOnClinicTime != undefined &&
          newVal.endOnClinicTime != undefined
        ) {
          this.datePickerValue = [
            newVal.startOnClinicTime,
            newVal.endOnClinicTime,
          ]
          this.queryParams = newVal
          if (
            newVal.startCheckoutTime != undefined &&
            newVal.endCheckoutTime != undefined
          ) {
            this.datePickerValueMinor = [
              newVal.startCheckoutTime,
              newVal.endCheckoutTime,
            ]
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    resetRouter() {
      this.$store.dispatch('pathQurey/setMarketQuery', {
        path: this.$route.path,
        data: this.queryParams,
      })
      this.getList()
    },
    resetRouters(e) {
      if (e) {
        const params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          startOnClinicTime: this.queryParams.startOnClinicTime,
          endOnClinicTime: this.queryParams.endOnClinicTime,
          orderByColumn: this.queryParams.orderByColumn,
          isAsc: this.queryParams.isAsc,
        }
        if (
          this.queryParams.startCheckoutTime != undefined &&
          this.queryParams.endCheckoutTime != undefined
        ) {
          params.startCheckoutTime = this.queryParams.startCheckoutTime
          params.endCheckoutTime = this.queryParams.endCheckoutTime
        }
        this.queryParams = params
        this.$store.dispatch('pathQurey/setMarketQuery', {
          path: this.$route.path,
          data: this.queryParams,
        })
      }
    },
    getDateFn(value, index) {
      this.isNormal = index
      if (this.isNormal == 0) {
        // 到诊时间
        if (this.datePickerValue == null || this.datePickerValue.length == 0) {
          this.getToday()
        } else if (this.datePickerValue[0].$d == undefined) {
          this.datePickerValue[0] = moment(this.datePickerValue[1]).set({
            hour: '00',
            minute: '00',
            second: '00',
          })._d
          this.datePickerValue[1] = moment(this.datePickerValue[1]).set({
            hour: '23',
            minute: '59',
            second: '59',
          })._d
          this.showDatePicker()
        } else {
          this.datePickerValue[0] = moment(this.datePickerValue[1].$d).set({
            hour: '00',
            minute: '00',
            second: '00',
          })._d
          this.datePickerValue[1] = moment(this.datePickerValue[1].$d).set({
            hour: '23',
            minute: '59',
            second: '59',
          })._d
          this.showDatePicker()
        }
        if (
          this.datePickerValueMinor == null ||
          this.datePickerValueMinor.length == 0
        ) {
          return
        } else if (this.datePickerValueMinor[0].$d == undefined) {
          this.datePickerValueMinor[0] = moment(
            this.datePickerValueMinor[0]
          ).set({ hour: '00', minute: '00', second: '00' })._d
          this.datePickerValueMinor[1] = moment(
            this.datePickerValueMinor[1]
          ).set({ hour: '23', minute: '59', second: '59' })._d
          this.showDatePicker()
        } else {
          this.datePickerValueMinor[0] = moment(
            this.datePickerValueMinor[0].$d
          ).set({ hour: '00', minute: '00', second: '00' })._d
          this.datePickerValueMinor[1] = moment(
            this.datePickerValueMinor[1].$d
          ).set({ hour: '23', minute: '59', second: '59' })._d
          this.showDatePicker()
        }
        this.changeTime(this.datePickerValue)
      } else {
        // 结账时间
        this.defaultTime = ['16:00:00', '16:00:00']
        this.showDatePicker()
        if (
          this.datePickerValueMinor == null ||
          this.datePickerValueMinor.length == 0
        ) {
          this.getDebit()
        } else if (this.datePickerValueMinor[0].$d == undefined) {
          this.datePickerValueMinor[0] = moment(
            moment(this.datePickerValueMinor[1]).set({
              hour: '16',
              minute: '00',
              second: '00',
            })._d
          ).subtract(1, 'days')._d
          this.datePickerValueMinor[1] = moment(
            this.datePickerValueMinor[1]
          ).set({ hour: '16', minute: '00', second: '00' })._d
          this.showDatePicker()
        } else {
          this.datePickerValueMinor[0] = moment(
            moment(this.datePickerValueMinor[1]).set({
              hour: '16',
              minute: '00',
              second: '00',
            })._d
          ).subtract(1, 'days')._d
          this.datePickerValueMinor[1] = moment(
            this.datePickerValueMinor[1].$d
          ).set({ hour: '16', minute: '00', second: '00' })._d
          this.showDatePicker()
        }

        if (
          this.datePickerValue == null ||
          this.datePickerValueMinor.length == 0
        ) {
          return
        } else if (this.datePickerValue[0].$d == undefined) {
          this.datePickerValue[0] = moment(
            moment(this.datePickerValue[0]).set({
              hour: '16',
              minute: '00',
              second: '00',
            })._d
          ).subtract(1, 'days')._d
          this.datePickerValue[1] = moment(this.datePickerValue[1]).set({
            hour: '16',
            minute: '00',
            second: '00',
          })._d
          this.showDatePicker()
        } else {
          this.datePickerValue[0] = moment(
            moment(this.datePickerValue[0]).set({
              hour: '16',
              minute: '00',
              second: '00',
            })._d
          ).subtract(1, 'days')._d
          this.datePickerValue[1] = moment(this.datePickerValue[1].$d).set({
            hour: '16',
            minute: '00',
            second: '00',
          })._d
          this.showDatePicker()
        }
        this.changeTime(this.datePickerValue)
      }
    },
    handleQuerys(e) {
      if (this.datePickerValue != null) {
        if (this.datePickerValue.length != 0) {
          if (this.datePickerValue[0].$d !== undefined) {
            e.startOnClinicTime = this.parseTime(
              this.datePickerValue[0].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            e.endOnClinicTime = this.parseTime(
              this.datePickerValue[1].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          } else {
            e.startOnClinicTime = this.parseTime(
              this.datePickerValue[0],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            e.endOnClinicTime = this.parseTime(
              this.datePickerValue[1],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          }
        }
      }
      if (this.datePickerValueMinor != null) {
        if (this.datePickerValueMinor.length != 0) {
          if (this.datePickerValueMinor[0].$d !== undefined) {
            e.startCheckoutTime = this.parseTime(
              this.datePickerValueMinor[0].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            e.endCheckoutTime = this.parseTime(
              this.datePickerValueMinor[1].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          } else {
            e.startCheckoutTime = this.parseTime(
              this.datePickerValueMinor[0],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            e.endCheckoutTime = this.parseTime(
              this.datePickerValueMinor[1],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          }
        }
      }
      this.queryParams = Object.assign(e, this.queryParams)
      this.resetRouter()
    },
    selectDateArrived(e) {
      //到诊时间
      if (e == null) {
        this.getList()
      } else {
        if (e[0].$d !== undefined) {
          this.queryParams.startOnClinicTime = this.parseTime(
            e[0].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endOnClinicTime = this.parseTime(
            e[1].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        } else {
          this.queryParams.startOnClinicTime = this.parseTime(
            e[0],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endOnClinicTime = this.parseTime(
            e[1],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
        this.resetRouter()
      }
    },
    selectDateArriveds(e) {
      //结账时间
      if (e == null) {
        this.queryParams.startCheckoutTime = undefined
        this.queryParams.endCheckoutTime = undefined
        this.isNormal = 0
        this.datePickerValueMinor = null
        this.resetRouter()
      } else if (e[0].$d !== undefined) {
        this.queryParams.startCheckoutTime = this.parseTime(
          e[0].$d,
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endCheckoutTime = this.parseTime(
          e[1].$d,
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.datePickerValueMinor = [
          this.queryParams.startCheckoutTime,
          this.queryParams.endCheckoutTime,
        ]
        this.resetRouter()
      } else {
        this.queryParams.startCheckoutTime = this.parseTime(
          e[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endCheckoutTime = this.parseTime(
          e[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.datePickerValueMinor = [
          this.queryParams.startCheckoutTime,
          this.queryParams.endCheckoutTime,
        ]
        this.resetRouter()
      }
    },
    haveFilingTime() {
      if (this.datePickerValueMinor != null) {
        if (this.datePickerValueMinor.length != 0) {
          if (this.datePickerValueMinor[0].$d !== undefined) {
            this.queryParams.startCheckoutTime = this.parseTime(
              this.datePickerValueMinor[0].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            this.queryParams.endCheckoutTime = this.parseTime(
              this.datePickerValueMinor[1].$d,
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          } else {
            this.queryParams.startCheckoutTime = this.parseTime(
              this.datePickerValueMinor[0],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
            this.queryParams.endCheckoutTime = this.parseTime(
              this.datePickerValueMinor[1],
              '{y}-{m}-{d} {h}:{i}:{s}'
            )
          }
        }
      }
    },
    changeTime(e) {
      if (Object.keys(this.marketParams).length > 5) {
        this.queryParams = this.marketParams
      } else {
        if (e[0].$d !== undefined) {
          this.queryParams.startOnClinicTime = this.parseTime(
            e[0].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endOnClinicTime = this.parseTime(
            e[1].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        } else {
          this.queryParams.startOnClinicTime = this.parseTime(
            e[0],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endOnClinicTime = this.parseTime(
            e[1],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
        this.haveFilingTime()
      }
      this.resetRouter()
    },
    /** 查询市场建档列表 */
    getList() {
      this.loading = true
      listReservation(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleExports() {
      this.handleExport(exportReservation)
    },
  },
}
</script>

<style scoped>
@import '../static/style.scss';
</style>
